
import { getResourceLevelUnit } from "@/api/common.js";
export default {
  data() {
    return {
      data1: [], // 在途中
      data2: [], // 已到达
      data3: [], // 已到达
      xAxisData: [],
      option: [],
      personOrgId: JSON.parse(sessionStorage.getItem("org")).orgId
    };
  },
  mounted() {
    this.getLevelUnit();
  },
  methods: {
    getLevelUnit() {
      getResourceLevelUnit({ orgId: this.personOrgId }).then(res => {
        const option = res.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        option.unshift({ value: "", label: "全部" });
        this.option = option;
      });
    },
    getTotal(list) {
      let num = 0;
      list.forEach(el => {
        num += el;
      });
      return num;
    },
    initCharts() {
      //  获取数据
      //  获取数据
      const data1 = this.data1;
      const data2 = this.data2;
      const datas = [data1, data2];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #F59066;border-radius: 50%;margin-right: 10px'></div>在途中: ${finishedCount}台</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fbd180;border-radius: 50%;margin-right: 10px'></div>已到达: ${unFinishedCount}台</div>`;
            }
          },
          legend: {
            itemGap: 5, // 图例之间的间隔
            selectedMode: false, // 是否可选择图例
            top: "7%",
            right: "5%",
            itemWidth: 15,
            itemHeight: 15,
            formatter: (name) => `{a|${name}} `,
            textStyle: {
              align: "left",
              backgroundColor: "transparent",
              color: "#fff",
              fontSize: 14,
              rich: {
                a: {
                  width: 55,
                  fontSize: 14,
                  lineHeight: 14
                }
              }
            }
          },
          grid: {
            left: "4%",
            right: "4%",
            top: "25%",
            bottom: "2%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              nameTextStyle: {
                color: "#fff"
              },
              data: this.xAxisData,
              axisLine: {
                lineStyle: {
                  color: "#22588F"
                }
              },
              axisLabel: {
                // x轴文字的配置
                show: true,
                interval: 0, // 使x轴上的文字显示完全,
                textStyle: {
                  color: "#fff"
                },
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 2;// 一行显示几个字 然后就超过字数就会自动换行
                  if ((paramsNameNumber / 2) > 2) {
                    provideNumber = 3;
                  }
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                }
              }
            }
          ],
          yAxis:
          {
            type: "value",
            name: "单位：台",
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: ["#666"],
                type: "dashed"
              }
            },
            min: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            }
          },
          series: [
            {
              name: "在途中",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F58888"
                    },
                    {
                      offset: 1,
                      color: "#F59066"
                    }
                  ]
                }
              }
            },
            {
              name: "已到达",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#F57777"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#F56666"
                      },
                      {
                        offset: 1,
                        color: "#F59066"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb000"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            }
          ]
        });
    },
    toResourceStatisticsList(id, state, categoryName) {
      const orgId = id || this.personOrgId;
      this.$emit("dialogShow", { orgId, state, categoryName });
    }
  }
};
